<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义网络模型市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #e6f0ff 0%, #f8e8e8 50%, #fff3e0 100%);
            color: #2c3e50;
            min-height: 100vh;
        }

        /* 页面标题 */
        .page-title {
            text-align: center;
            padding: 2rem 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 2;
        }

        .title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
        }

        .home-link {
            color: #1a2a6c;
            font-size: 1.5rem;
            text-decoration: none;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-right: 0.5rem;
        }

        .home-link:hover {
            background: rgba(26, 42, 108, 0.1);
            transform: translateY(-2px);
        }

        .title-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .title-content h1, .title-content p {
            margin: 0;
            text-align: left;
        }
        @media (max-width: 600px) {
            .title-container {
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;
            }
            .title-content {
                align-items: center;
            }
            .title-content h1, .title-content p {
                text-align: center;
            }
        }

        .user-profile {
            position: absolute;
            right: 2rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 3;
        }

        .user-profile-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            z-index: 3;
        }

        .user-name {
            font-size: 1.1rem;
            color: #1a2a6c;
            font-weight: 500;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #1a2a6c;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            min-width: 160px;
            display: none;
            z-index: 4;
            margin-top: 0.5rem;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-item {
            padding: 0.75rem 1rem;
            color: #2c3e50;
            text-decoration: none;
            display: block;
            transition: all 0.3s;
        }

        .dropdown-item:hover {
            background: rgba(26, 42, 108, 0.05);
            color: #1a2a6c;
        }

        .dropdown-item i {
            margin-right: 0.5rem;
            color: #1a2a6c;
        }

        /* 导航标签 */
        .nav-tabs {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }

        .tab-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            gap: 2rem;
        }

        .tab-item {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            color: #666;
        }

        .tab-item:hover {
            background: rgba(26, 42, 108, 0.05);
            color: #1a2a6c;
        }

        .tab-item.active {
            background: rgba(26, 42, 108, 0.1);
            color: #1a2a6c;
        }

        /* 搜索框 */
        .search-section {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .search-box {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .search-input {
            width: 100%;
            padding: 1rem 1.5rem;
            padding-right: 3rem;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 1.1rem;
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.95);
        }

        .search-input:focus {
            outline: none;
            border-color: #1a2a6c;
            box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.1);
        }

        .search-button {
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #1a2a6c;
            cursor: pointer;
            font-size: 1.2rem;
        }

        /* 模型列表 */
        .model-list {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .model-item {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            border: 1px solid rgba(26, 42, 108, 0.1);
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .model-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            border-color: #1a2a6c;
        }

        .model-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .model-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .model-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1a2a6c;
        }

        .model-stats {
            display: flex;
            gap: 1.5rem;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #666;
        }

        .stat-value {
            font-weight: 600;
            color: #1a2a6c;
        }

        .model-description {
            color: #2c3e50;
            line-height: 1.6;
            margin: 0.5rem 0;
        }

        .model-meta {
            display: flex;
            gap: 1.5rem;
            color: #666;
            font-size: 0.875rem;
        }

        .model-meta span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .model-meta i {
            color: #1a2a6c;
        }

        .model-actions {
            display: flex;
            gap: 1rem;
            min-width: 200px;
            justify-content: flex-end;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 100%);
            color: white;
            border: none;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-outline {
            background: white;
            color: #1a2a6c;
            border: 2px solid #1a2a6c;
        }

        .btn-outline:hover {
            background: rgba(26, 42, 108, 0.1);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .page-title h1 {
                font-size: 2rem;
            }

            .tab-container {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }

            .model-list {
                grid-template-columns: 1fr;
            }

            .model-header {
                flex-direction: column;
                gap: 1rem;
            }

            .model-stats {
                width: 100%;
                justify-content: space-around;
            }
        }
    </style>
</head>
<body>
    <!-- 页面标题 -->
    <header class="page-title">
        <div class="title-container">
            <a href="index.html" class="home-link">
                <i class="fas fa-home"></i>
            </a>
            <div class="title-content">
                <h1>语义网络模型市场</h1>
                <p>发现和使用高质量语义网络模型</p>
            </div>
        </div>
        <div class="user-profile">
            <div class="user-profile-container" id="userProfile">
                <div class="user-avatar" id="userAvatar">U</div>
                <span class="user-name" id="userName">未登录</span>
            </div>
            <div class="dropdown-menu" id="dropdownMenu">
                <a href="personal/scriptOperate.html" class="dropdown-item">
                    <i class="fas fa-tachometer-alt"></i> 个人工作台
                </a>
                <a href="#" class="dropdown-item" id="logoutBtn">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </a>
            </div>
        </div>
    </header>

    <!-- 导航标签 -->
    <div class="nav-tabs">
        <div class="tab-container">
            <div class="tab-item active">
                <i class="fas fa-cube"></i> 模型
            </div>
            <div class="tab-item">
                <i class="fas fa-project-diagram"></i> 关系
            </div>
            <div class="tab-item">
                <i class="fas fa-desktop"></i> 界面
            </div>
        </div>
    </div>

    <!-- 搜索框 -->
    <section class="search-section">
        <div class="search-box">
            <input type="text" class="search-input" placeholder="搜索模型...">
            <button class="search-button">
                <i class="fas fa-search"></i>
            </button>
        </div>
    </section>

    <!-- 模型列表 -->
    <main class="model-list">
        <div class="model-item">
            <div class="model-info">
                <div class="model-header">
                    <h3 class="model-title">省份城市模型</h3>
                    <div class="model-stats">
                        <div class="stat-item">
                            <span class="stat-value">98%</span>
                            <span>适配率</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">1.2k</span>
                            <span>使用量</span>
                        </div>
                    </div>
                </div>
                <p class="model-description">
                    基于语义网络的省份城市关系模型，支持省份-城市双向查询，包含完整的中国省份和城市数据。提供中英文双语支持。
                </p>
                <div class="model-meta">
                    <span><i class="fas fa-clock"></i> 更新时间: 2023-12-15</span>
                    <span><i class="fas fa-code-branch"></i> 版本: v2.1.0</span>
                    <span><i class="fas fa-user"></i> 贡献者: 系统管理员</span>
                </div>
            </div>
            <div class="model-actions">
                <button class="btn btn-outline">查看详情</button>
                <button class="btn btn-primary">使用模型</button>
            </div>
        </div>

        <div class="model-item">
            <div class="model-info">
                <div class="model-header">
                    <h3 class="model-title">医院知识模型</h3>
                    <div class="model-stats">
                        <div class="stat-item">
                            <span class="stat-value">95%</span>
                            <span>适配率</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">856</span>
                            <span>使用量</span>
                        </div>
                    </div>
                </div>
                <p class="model-description">
                    完整的医院知识图谱模型，包含医院、科室、医生、患者、疾病、药品等多维度信息，支持复杂的医疗信息查询和关系推理。
                </p>
                <div class="model-meta">
                    <span><i class="fas fa-clock"></i> 更新时间: 2023-12-10</span>
                    <span><i class="fas fa-code-branch"></i> 版本: v1.5.0</span>
                    <span><i class="fas fa-user"></i> 贡献者: 医疗团队</span>
                </div>
            </div>
            <div class="model-actions">
                <button class="btn btn-outline">查看详情</button>
                <button class="btn btn-primary">使用模型</button>
            </div>
        </div>

        <div class="model-item">
            <div class="model-info">
                <div class="model-header">
                    <h3 class="model-title">身高体重模型</h3>
                    <div class="model-stats">
                        <div class="stat-item">
                            <span class="stat-value">92%</span>
                            <span>适配率</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">642</span>
                            <span>使用量</span>
                        </div>
                    </div>
                </div>
                <p class="model-description">
                    个人身高体重信息管理模型，支持身高体重数据的存储和查询，可用于健康管理和数据分析。
                </p>
                <div class="model-meta">
                    <span><i class="fas fa-clock"></i> 更新时间: 2023-12-05</span>
                    <span><i class="fas fa-code-branch"></i> 版本: v1.2.0</span>
                    <span><i class="fas fa-user"></i> 贡献者: 健康团队</span>
                </div>
            </div>
            <div class="model-actions">
                <button class="btn btn-outline">查看详情</button>
                <button class="btn btn-primary">使用模型</button>
            </div>
        </div>
    </main>

    <script>
        // 标签切换
        const tabItems = document.querySelectorAll('.tab-item');
        tabItems.forEach(item => {
            item.addEventListener('click', () => {
                tabItems.forEach(i => i.classList.remove('active'));
                item.classList.add('active');
            });
        });

        // 用户信息显示和下拉菜单
        const userProfile = document.getElementById('userProfile');
        const dropdownMenu = document.getElementById('dropdownMenu');
        const userName = document.getElementById('userName');
        const userAvatar = document.getElementById('userAvatar');
        const logoutBtn = document.getElementById('logoutBtn');

        // 检查登录状态
        const token = localStorage.getItem('token');
        const userStr = localStorage.getItem('user');
        let user = null;
        try {
            user = userStr ? JSON.parse(userStr) : null;
        } catch (e) {
            console.error('Error parsing user data:', e);
            user = null;
        }

        if (!token || !user) {
            // 未登录，跳转到登录页
            window.location.href = 'user/login.html';
        } else {
            // 已登录，显示用户信息
            userName.textContent = user.username;
            userAvatar.textContent = user.username.charAt(0).toUpperCase();

            // 点击用户信息显示下拉菜单
            userProfile.addEventListener('click', (e) => {
                e.stopPropagation();
                dropdownMenu.classList.toggle('show');
            });

            // 点击其他地方关闭下拉菜单
            document.addEventListener('click', () => {
                dropdownMenu.classList.remove('show');
            });

            // 退出登录
            logoutBtn.addEventListener('click', (e) => {
                e.preventDefault();
                localStorage.removeItem('token');
                localStorage.removeItem('user');
                window.location.href = 'user/login.html';
            });
        }

        // 搜索功能
        const searchInput = document.querySelector('.search-input');
        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const modelItems = document.querySelectorAll('.model-item');

            modelItems.forEach(item => {
                const title = item.querySelector('.model-title').textContent.toLowerCase();
                const description = item.querySelector('.model-description').textContent.toLowerCase();

                if (title.includes(searchTerm) || description.includes(searchTerm)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html> 